<template>
  <div class="search-bar-container">
    <div class="input-wrapper">
      <input 
        type="text" 
        v-model="searchQuery" 
        placeholder="搜索电影、导演或演员"
        class="search-input"
      >
      <i class="search-icon"></i>
    </div>

    <div class="filter-buttons">
      <button class="filter-btn" @click="showDropdown('type')">
        影片 <i class="arrow-icon"></i>
      </button>

      <button class="filter-btn" @click="showDropdown('sort')">
        默认排序 <i class="arrow-icon"></i>
      </button>

      <div class="channel-btn-wrapper">
        <button class="filter-btn" @click="showDropdown('channel')">
          全部频道 <i class="arrow-icon"></i>
        </button>
        
        <div 
          v-if="activeDropdown === 'channel'" 
          class="channel-dropdown"
        >
          <div class="channel-tags-container">
            <button 
              v-for="channel in channelOptions" 
              :key="channel" 
              class="channel-tag"
              @click="activeDropdown = null" 
            >
              {{ channel }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const searchQuery = ref('')
const activeDropdown = ref(null)
const channelOptions = [
  '创意', '励志', '搞笑', '运动', '旅行', '爱情', 
  '广告', '动画', '剧情', '音乐', '科幻', '纪录', '预告', 
  '混剪', '实验', '生活', '时尚', '汽车', '游戏', '美食'
]
const router = useRouter()

const showDropdown = (type) => {
  activeDropdown.value = activeDropdown.value === type ? null : type
}

const navigateToChannel = (channel) => {
  console.log('点击了频道标签:', channel);
  // activeDropdown.value = null // 这行可以保留或移除，取决于是否希望点击后关闭下拉菜单
  // router.push({ path: '/movies', query: { channel } }) // 删除了跳转逻辑
};
</script>

<style src="./MovieSearchBar.css" scoped></style>